<template>
  <div class="ui-chart-quota">
    <ui-brick-wall
      class="ui-chart-quota"
      :span="span"
      :base-width="itemWidth"
      :data="items"
    >
      <template slot="item" slot-scope="scope">
        <chart-quota-item v-bind="scope.data.props">
        </chart-quota-item>
      </template>
    </ui-brick-wall>
    <slot></slot>
  </div>
</template>
<script>
import UiBrickWall from '../brick-wall'
import ChartQuotaItem from './chart-quota-item'

export default {
  name: 'UiChartQuota',
  components: {
    UiBrickWall,
    ChartQuotaItem
  },
  provide () {
    return {
      UiChartQuota: this
    }
  },
  props: {
    itemWidth: {
      type: Number
    },
    span: {
      type: Number
    }
  },
  data () {
    return {
      ready: false,
      items: []
    }
  },
  mounted () {
    this.ready = true
  },
  methods: {
    addItem (item) {
      if (!item) {
        return
      }
      if (this.items.some(v => v.id === item.id)) {
        return
      }
      this.items.push(item)
    },
    removeItem (id) {
      let index = -1
      this.items.some((v, i) => {
        if (v.id === id) {
          index = i
          return true
        }
      })
      if (index < 0) {
        return
      }
      this.items.splice(index, 1)
    }
  }
}
</script>
<style lang="less">
</style>
